import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Login } from "actions/common";
import { pwdLogin } from "actions/login";
import { isOverflow } from "app/utils";
import AxHeader from "components/AxHeader";
import AxFooter from "components/Footer";
import s from "./index.scss";
import { Flex , Toast} from "antd-mobile";
import yzm2Png from "assets/images/yzm2.png";
import pwdPng from "assets/images/pwd.png";
import phonePng from "assets/images/phone.png";

import Icon from "antd/lib/Icon";
import md5 from "app/utils/md5"
import {callApi} from "app/utils";


@connect(
  state => ({
    common: state.common,
    login: state.login,
  }),
  {
    Login,
    pwdLogin
  }
)
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      phone: "",
      sms: "",
      tipStr:"获取短信验证码",
      isSend:false,
      sendStr:'重新发送(60)秒',
      timer:null,
      time:5,
      pwd:'',
      pwd2:'',
      inviteCode:'',
   };
   this.handelPwd = this.handelPwd.bind(this)
   this.handelPwd2 = this.handelPwd2.bind(this)
   this.handelSms = this.handelSms.bind(this)
   this.clearValue = this.clearValue.bind(this)
   this.sendSms = this.sendSms.bind(this)
   this.handelInviteCode = this.handelInviteCode.bind(this)
   this.submitLogin = this.submitLogin.bind(this)
   
   
  }

handelPwd(event) {
   // console.log(event.target.value);
    this.setState({pwd:event.target.value})
}
handelPwd2(event) {
  //console.log(event.target.value);
  this.setState({pwd2:event.target.value})
}
handelSms(event) {
  //console.log(event.target.value);
  this.setState({sms:event.target.value})
}
handelInviteCode(event) {
  //console.log(event.target.value);
  this.setState({inviteCode:event.target.value})
}

sendSms(){
  
  this.setState({
    isSend:true
  })
 // console.log(this.props.location.query.phone)
  var getMessageCodeSubmitData={mobile : this.props.location.query.phone, verifyType : '0'};
  callApi('/common/smscode/send',getMessageCodeSubmitData,"POST").then((data)=>{
    //console.log(data)
  })

  this.state.timer = setInterval(()=>{
    this.state.time--
    if(this.state.time==0){
      clearInterval( this.state.timer )
      this.setState({
        isSend:false,
        time:5,
      })
    }
    this.setState({
      sendStr:`重新发送(${this.state.time})秒`,
    })
   
  },1000)
}

clearValue(e){
  if(e=='pwd'){
    this.setState({pwd:''})
  }else if(e=='pwd2'){
    this.setState({pwd2:''})
  }else if(e=='inviteCode'){
    this.setState({inviteCode:''})
  }
}

submitLogin(){
    var { pwdLogin } = this.props;
    
    if(this.state.sms == ""){
        Toast.info('请填写验证码', 1);
       // console.log("请填写验证码");
        return false;
    }
    if(this.state.pwd == "") {
      Toast.info('请填写密码', 1);
      //console.log("请填写密码");
      return false;
  }
    if(!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/.test(this.state.pwd))) {
        Toast.info('密码格式不正确', 1);
       // console.log("密码格式不正确");
        return false;
  }
    if(this.state.pwd2 == "") {
      Toast.info('请输入确认密码', 1);
      //console.log("请输入确认密码");
      return false;
  }
  if(this.state.pwd2 != this.state.pwd) {
    Toast.info('两次输入的密码不一致', 1);
    //console.log("两次输入的密码不一致");
    return false;
  }
   
  var registerUserSubmitData={
    mobile : this.props.location.query.phone, 
    password : this.state.pwd,  
    smsCode : this.state.sms, //验证码
    inviteCode : this.state.inviteCode, //推荐人邀请码，当邀请码和手机号同时存在的时候取邀请码
    inviterMobile : '', //推荐人手机号
    // eventId: eventId
    /*channelId:channelIds*/
    };
    pwdLogin(registerUserSubmitData,'/user/register/bymobile').then((data)=>{
      if(data.response.success==true){
        Toast.info('注册成功',1)
        this.props.router.push('/')
      }
    })
    
    //console.log(this.props.login)
}

  componentDidMount() {
    let { Login } = this.props;
    
  }
  componentWillReceiveProps(nextProps) {
  
  }

  render() {
    let { isLogin } = this.props.common;
    let {sms,pwd,pwd2,inviteCode } = this.state
    return (
      <div className={`${s.registerStep2Box}`}>
      <div>
        <AxHeader />
        <Flex direction="column" className={`${s.formBox}`}>

          
          <Flex.Item className={`${s.item}`}>
            <Flex>
              <Flex.Item className={`${s.item} flex6`}>
              <img className={`${s.rightImg}`} src={yzm2Png} />
            <input
              placeholder="请输入验证码"
              type="number"
              className={`${s.sms}`}
              value={sms}
              onChange={this.handelSms}
            />
              </Flex.Item>
              <Flex.Item className={`${s.item} flex4`}>
                <div className={`${s.loginBtn}`} style={{fontSize:'0.12rem',marginLeft:'10%',display:this.state.isSend?'none':"block"}} onClick={this.sendSms}>{this.state.tipStr}</div>
                <div className={`${s.loginBtn}`} style={{fontSize:'0.12rem',marginLeft:'10%',display:this.state.isSend?'block':"none",backgroundColor:"rgba(70,161,251,.5)"}} >{this.state.sendStr}</div>
              </Flex.Item>
            </Flex>
            
          </Flex.Item>

          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={pwdPng} />
            <input
              placeholder="请输入密码（6-18位字母和数字）"
              type="password"
              className={`${s.pwd}`}
              value={pwd}
              onChange={this.handelPwd}
            />
            <Icon className={`${s.closeCircle}`} type="cross" onClick={this.clearValue.bind(this,'pwd')} />
          </Flex.Item>

          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={pwdPng} />
            <input
              placeholder="请再次确认密码（6-18位字母和数字）"
              type="password"
              className={`${s.pwd2}`}
              value={pwd2}
              onChange={this.handelPwd2}
            />
            <Icon className={`${s.closeCircle}`} type="cross" onClick={this.clearValue.bind(this,'pwd2')} />
          </Flex.Item>

          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={phonePng} />
            <input
              placeholder="请输入6位邀请码（可不填写）"
              type="number"
              className={`${s.inviteCode}`}
              value={inviteCode}
              onChange={this.handelInviteCode}
            />
            <Icon className={`${s.closeCircle}`} type="cross" onClick={this.clearValue.bind(this,'inviteCode')} />
          </Flex.Item>
         
          <Flex.Item className={`${s.item}`}>
            <div className={`${s.loginBtn}`} onClick={this.submitLogin}>立即注册</div>
          </Flex.Item>
         
        </Flex>
        </div>
        <AxFooter base={false} />
      </div>
    );
  }
}
